<template>
    <div class="list">
        <div class="table" v-if="active==1">
            <el-form :model="params">
                <el-container>
                    <el-form-item>
                        <el-input v-model="params.caseNo" placeholder="案号搜索"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="params.item" :value="params.item" style="margin-left: 10px">
                            <el-option
                                    :key="item.id"
                                    v-for="item in itemList"
                                    :value="item.fileName"
                                    :label="item.fileName"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="params.status" :value="params.status" style="margin-left: 10px">
                            <el-option value="" label="审核状态"></el-option>
                            <el-option value="1" label="审核中"></el-option>
                            <el-option value="2" label="审核不通过"></el-option>
                            <el-option value="3" label="审核通过"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 10px">
                        <el-button type="primary" @click="handleSearch">检索</el-button>
                    </el-form-item>
                </el-container>
            </el-form>

            <el-table :border="true" :data="pageResult.records">
                <el-table-column prop="id" v-if="false"></el-table-column>
                <el-table-column prop="caseid" v-if="false"></el-table-column>
                <el-table-column label="序号" type="index" width="80px"></el-table-column>
                <el-table-column label="案号" prop="caseNo" ></el-table-column>
                <el-table-column label="领用人" prop="applyforRecipient" ></el-table-column>
                <el-table-column label="收函方/委托人" prop="sendPerson"></el-table-column>
                <el-table-column label="领用日期" prop="applyforReceive"></el-table-column>
                <el-table-column label="审核状态" prop="status">
                    <template slot-scope="scope">
                        {{scope.row.applyforApprovalStatus=='1'?'审批中':
                        scope.row.applyforApprovalStatus=='2'?'审批不通过':'审批通过'}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-dropdown trigger="click" @command="handleCommandClick">
                            <el-button>
                                操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item :command="beforeHandlerCommand(scope.row,'show')">查看详情</el-dropdown-item>
                                <el-dropdown-item :command="beforeHandlerCommand(scope.row,'delete')" v-if="scope.row.applyforApprovalStatus!='1'"></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <el-footer class="seal-list-footer">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="pageResult.total"
                        :page-size="pageResult.size"
                        class="pagination"
                        @current-change="handleIndexChange"
                >
                </el-pagination>
            </el-footer>
        </div>

        <div class="details" v-if="active==2">
            <yongyin-details :law="law" :sealList="sealList" @back="back"></yongyin-details>
        </div>
    </div>
</template>

<script>
    //引入组件
    const YongyinDetails = () => import('./YongyinDetails.vue')
    //引入服务类
    import {CaseSealApplyforService} from "../../../model/gs/CaseSealApplyforService";
    import CaseLawService from '../../../model/gs/CaseLawService.js'
    const caseSealApplyforService = CaseSealApplyforService.getInstance()
    const caseLawService = CaseLawService.getInstance()

    export default {
        props:['tab'],
        data() {
            return {
                active:1,
                params:{
                    status:'',
                    item:'',
                    caseNo:''
                },
                itemList:[],
                pageResult:{},
                law:{},
                sealList:[]
            }
        },
        methods:{
            back(){
                this.active=1
            },
            getSealApplyforList(){
                caseSealApplyforService.getByPage(this.params).then(response => {
                    if(response.data.code === 0){
                        this.pageResult= response.data.data
                    }
                })
            },
            //当前页放生变化的事件
            handleIndexChange(index){
                this.params.page = index
                this.getSealApplyforList()
            },
            //检索按钮点击事件
            handleSearch(){
                //重置当前页为1
                this.params.page = 1
                this.getSealApplyforList()
            },
            //处理角标变化的方法
            handleCommandClick(command){
                switch (command.type) {
                    case 'show': this.showDetails(command.seal);break;
                    // case 'delete': this.handleRecord(command.seal);break;
                }
            },
            //查看详情的方法
            showDetails(seal){
                //通过案件id查询文书和案件信息
                this.$axios.all([caseLawService.getById(seal.caseid),
                                caseSealApplyforService.getByCaseLaw(seal.caseid)])
                    .then(this.$axios.spread((lawResponse,sealResponse) => {
                        this.law=lawResponse.data.data
                        this.sealList=sealResponse.data.data
                        this.active++
                    }))
            },
            //角标改变前的方法
            beforeHandlerCommand(seal,type){
                return {
                    seal,type
                }
            }
        },
        created(){
            this.getSealApplyforList()
        },
        watch:{
            tab:{
                handler(){
                    if(this.tab == 'history'){
                        this.active=1
                    }
                }
            }
        },
        components:{
            YongyinDetails
        }
    }
</script>

<style scoped>
    .list{
        width: 100%;
    }
    .table{
        width: 100%;
    }
    .pagination{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .details{
        width: 100%;
    }
</style>